<template>
  <div class="box8">
    <div class="title">
      <p>预约渠道数据统计</p>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//获取DOM节点
let charts = ref()
let datas = [
  {
    name: '去哪儿网',
    value: 1,
  },
  {
    name: '携程',
    value: 3,
  },
  {
    name: '同程',
    value: 4,
  },
  {
    name: '飞猪',
    value: 5,
  },
  {
    name: '智慧文旅',
    value: 6,
  },
]
//组件挂载完毕
onMounted(() => {
  //一个容器可以同时展示多种类型的图形图标
  let mychart = echarts.init(charts.value)
  let option = {
    color: ['#F56463', '#00C6FF', '#F09615', '#0079E6', '#a814ff', '#03b915'],
    // title: { // 圆环标题
    //   text: '总产量', // 主标题
    //   textStyle: { // 主标题样式
    //     color: '#fff',
    //     fontWeight: 'bold',
    //     fontSize: 20
    //   },
    //   left: '34%', // 定位到适合的位置
    //   top: '46%', // 定位到适合的位置
    //   subtext: `26元`, // 副标题
    //   subtextStyle: { // 副标题样式
    //     color: '#fff',
    //     fontSize: 24,
    //     fontWeight: 'bold'
    //   },
    //   textAlign: 'center' // 主、副标题水平居中显示
    // },
    legend: {
      itemHeight: 14,
      itemWidth: 14,
      icon: 'rect',
      orient: 'vertical',
      top: 'center',
      right: '5%',
      textStyle: {
        align: 'left',
        color: 'white',
        fontSize: 16,
        lineHeight: 25,
        // verticalAlign: "middle",
        rich: {
          name: {
            width: 80,
            fontSize: 16,
          },
          value: {
            width: 20,
            align: 'right',
            fontFamily: 'Medium',
            fontSize: 16,
          },
          rate: {
            width: 10,
            align: 'right',
            fontSize: 16,
          },
        },
      },
      data: datas,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{d}%',
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '80%'],
        center: ['40%', '50%'],
        roseType: 'radius',
        label: {
          formatter: '{d}%',
          textStyle: {
            fontSize: 16,
            color: 'white',
          },
        },
        labelLine: {
          length: 1,
          length2: 20,
        },
        data: datas,
      },
    ],
  }
  //设置配置项
  mychart.setOption(option)
})
</script>

<style scoped lang="scss">
.box8 {
  width: 100%;
  height: 100%;
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;

  .title {
    p {
      color: white;
      font-size: 18px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
